<template>
  <div class="login-container" :style="backgroundImage ? { background: `url(${backgroundImage})` } : {}">
    <div class="login-weaper animated bounceInDown">
      <div class="login-left">
        <custom-image class="img" src="/img/logo.png" alt="logo" />
        <p class="title">{{ description }}</p>
      </div>
      <div class="login-border">
        <div class="login-main">
          <h4 class="login-title">{{ title }}<top-lang /></h4>
          <user-login :form="form" :background-image.sync="backgroundImage" />
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import UserLogin from '@/components/base/login'
import TopLang from '@/components/base/top-lang'
export default {
  name: 'LoginWrapper',
  props: ['title', 'description', 'form'],
  components: { TopLang, UserLogin },
  data: () => ({ time: '', backgroundImage: '' }),
  created() {
    const unWatch = this.$watch('$route', this.handleLogin)
    this.$once('hook:beforeDestroy', () => {
      unWatch()
    })
  }
}
</script>

<style lang="scss">
@import '@/styles/login.scss';
</style>
